創立app

使用createApp 創立一個新的應用實體，而createApp是一個物件
每個app都會需要一個root component（根組件aka組件樹），通常在底下會掛載其他子組件。

?為什麼只有一個根元素?：https://juejin.cn/post/6844904074438000648

?? like React Fragment：在一個組建下掛載多個子組件，在不增加DOM節點的情況下重新組合component

import { createApp } from 'vue'

const app = createApp({})

// Type
function createApp(rootComponent: Component, rootProps?: object): App
// 第一個參數為根組件、第二個參數為傳入的東西

可以使用createAppAPI讓多個Vue app在同一頁上，各個app都有自己的配置與元件

SFC的檔案使用方法

• 從其他地方import文件進來
• 大多時候內部的子組件都是可以重複使用

import { createApp } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'

const app = createApp(App)

第一步: 安裝app

在app尚未在.mount方法中掛載前，是不會顯示出任何內容的。
所以需要一個容器將實際的DOM元素或是css選擇器的字符串掛載上去。

• app中的根節點會顯示掛載的元件而不是顯示app的內容
• .mount方法應該要一直在app後使用
• 每一個app的mount只能調用一次

<!-- html -->
<div id="app"></div>

<!-- js -->
app.mount('#app')

第二步: 非安裝環境下的使用

在跟組件的html中若沒有template的話，vue會直接把app當作模板使用

<!-- html -->
<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

<!-- js -->
import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

第三步: 在根組件建立多個vue實體

在大型案件中，可以使用createApp方法創立多個獨立且各自有不同的功能的app實例

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

總結

1. 使用createApp來創立一個app組件，使用方式可以是直接寫在內部，或是使用SFC的外部文件import方式使用，作為一個根組件，其內部可以擁有多個子組建

2. 在app尚未使用mount方法時是不會有任何東西顯示的，所以需要一個容器來掛載內容

3. 每一個app的mount只能掛載一次

4. 根組件中的html若沒有template，VUE會直接將app當作模板使用

5. 可以使用createAPP創立多個獨立且不同功能的實例